<template>
  <div class="content">
    <el-card class="bottom10">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1">
          <template slot="title">
            <span style="font-size:18px;">筛选查询</span>
          </template>
          <el-form ref="form" :model="form" label-width="100px">
            <div class="search-class">
              <el-form-item label="用户手机号：">
                <el-input v-model="form.phone" placeholder="输入用户账号查询" clearable />
              </el-form-item>
              <el-form-item label="用户昵称：">
                <el-input v-model="form.nickname" placeholder="输入用户昵称查询" clearable/>
              </el-form-item>
              <el-form-item label="openId：">
                <el-input v-model="form.openid" placeholder="输入用openid查询" clearable/>
              </el-form-item>
              <el-form-item label="注册时间：">
                <el-date-picker v-model="form.createdate" type="daterange" align="right" clearable value-format="yyyy-MM-dd" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
              </el-form-item>
              <el-form-item label="">
                <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
              </el-form-item>
            </div>
          </el-form>
        </el-collapse-item>
      </el-collapse>
      <el-row class="flex-hs tabTop">
        <el-col :span="24">
          <div class="flex-hs">
            <!-- <el-button type="success">群发短信</el-button> -->
            <download-excel :data="json_data" :fields="json_fields" name="用户表.xls">
              <el-button type="primary">导出EXCEL(仅当前页)</el-button>
            </download-excel>
            <!-- <el-button type="danger" :disabled="multipleSelection.length === 0" @click="deleteItem(1)">删除</el-button> -->
          </div>
        </el-col>
      </el-row>
      <el-row class="flex-hs">
        <el-table :data="tableData" border style="width: 100%;margin:20px 0" @selection-change="handleSelectionChange">
          <el-table-column type="selection" label="" width="50" />
          <el-table-column prop="id" label="编号" width="150" />
          <el-table-column prop="openid" label="用户ID" width="280" />
          <el-table-column prop="phone" label="手机号" width="150" />
          <el-table-column prop="nickname" label="角色昵称" />
          <el-table-column prop="gender" label="性别" width="100">
            <template slot-scope="scope">
              <el-tag :type="{ 0:'info',1: 'primary', 2: 'danger' }[scope.row.gender]">{{ { 0:'保密', 1: '男', 2: '女' }[scope.row.gender] }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="discount" label="可抵扣金额" width="150"/>
          <!-- <el-table-column prop="state" label="账号启用状态" width="200">
            <template slot-scope="scope">
              <el-tag :type="{ 1: 'primary', 0: 'danger' }[scope.row.state]">{{ { 1: '启用', 0: '禁用' }[scope.row.state] }}</el-tag>
            </template>
          </el-table-column> -->
          <el-table-column label="操作" width="60">
            <template slot-scope="scope">
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  <i class="el-icon-more-outline" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="whatIclick('look', scope.row)">查看</el-dropdown-item>
                  <el-dropdown-item :command="whatIclick('update', scope.row)">修改</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row class="flex-he">
        <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </el-row>
    </el-card>
    <look-info v-if="openLookInfo" ref="lookInfo" />
    <up-load v-if="openUpLoad" ref="upLoad" />
  </div>
</template>

<script>
import lookInfo from './lookInfo'
import upLoad from './upload'
export default {
  components: {
    lookInfo,
    upLoad,
  },
  data() {
    return {
      activeNames: ['1'],
      currentPage: 1,
      pageSize: 20,
      total: 100,
      form: {
        phone: '',
        openid:'',
        nickname: '',
        createdate: ''
      },
      openUpLoad: false,
      openLookInfo: false,
      openSplitOrder:false,
      multipleSelection: [],
      tableData: [],
      json_fields: {
        '用户编号': 'id', //常规字段
        'openid': 'openid', //常规字段
        '用户微信昵称': 'nickname', //常规字段
        '联系电话': 'phone', //支持嵌套属性
        '城市': 'city', 
        '性别': {
          field: 'gender',
          //自定义回调函数
          callback: value => {
            return {1:'男',2:'女',0:'保密'}[value]
          }
        }
      },
      json_data: [],
      json_meta: [
        [
          {
            'key': 'charset',
            'value': 'utf-8'
          }
        ]
      ]
    }
  },
  computed: {
    queryData() {
      const obj = this.form
      obj.count = this.pageSize
      obj.page = this.currentPage
      return obj
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    search() {
      this.$http.httpPost('/user/userList', this.queryData).then(res => {
        console.log(res, 'hhhh')
        if (res.data.code == 0) {
          this.total = res.data.data.total
          this.tableData = res.data.data.data
          this.json_data = res.data.data.data
        }
      })
    },
    addor(val) {
      this.openLookInfo = true
      this.$nextTick(() => {
        this.$refs.lookInfo.init(val)
      })
    },
    whatIclick(type, data) {
      return {
        type,
        data
      }
    },
    deleteItem(val) {
      const idarr = []
      if (val === 1) {
        this.multipleSelection.forEach(e => {
          idarr.push(e.id)
        })
      } else {
        idarr.push(val.id)
      }
      const ids = idarr.join()
      this.$confirm('此操作将删除角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http.httpPost('/role/delRole', { ids: ids }).then(res=>{
            if (res) {
              this.$operateTip('已完成！', '已完成数据删除！', 'success')
              this.search()
            }
          })
        })
        .catch(() => {
          this.$operateTip('已取消！', '已取消数据删除！', 'info')
        })
    },
    handleCommand(e) {
      if (e.type === 'update') {
        this.openUpLoad = true
        this.$nextTick(() => {
          this.$refs.upLoad.edit(e.data)
        })
      } else if (e.type === 'splitOrder') {
        this.openSplitOrder = true
        this.$nextTick(() => {
          this.$refs.splitOrder.init(e.data)
        })
      } else if (e.type === 'look') {
        this.openLookInfo = true
        this.$nextTick(() => {
          this.$refs.lookInfo.init(e.data)
        })
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.search()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.search()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>
<style lang="less"></style>
